<template>
  <div class="component-banner" ref="banner">
    <div class="loading" v-if="list.length===0"><span class="iconfont">&#xe66b;</span></div>
    <!--<div class="component-banner-container" :style="{width:allWidth,transform:translateStyle}" @touchstart="touchstart" @touchend="touchend">-->
    <div class="component-banner-container" :style="Object.assign(bannerContainerStyle,{width:allWidth})" @touchstart="touchstart" @touchend="touchend">
      <div class="subItem" v-for="(item,index) in lists" :key="index" :style="{width:singleWidth}" @click="ban">
        <img :src="item[configs.field.thumb]">
      </div>
    </div>
    <div class="page" v-if="configs.isPage">
      <ul>
        <template v-for="(item,index) in list.length">
          <li :class="{on:curPage===(index+1)}"></li>
        </template>

      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "banner",
    props:{
      list:{
        type:Array,
        required:false
      },
      config:{
        type:Object,
        default:function(){
          return {};
        }
      }
    },
    data(){
      return {
        configs:Object.assign({
          // limit:10,     // 多少条数据
          isPage:true, // 是否分页
          field:{
            // 字段映射
            thumb:'thumb',
            title:'title',
            src:'src'
          },
          duration:800,
        },this.config),
        curPage:0, // 当前页码
        singleWidth:0,
        translateStyle:'',
        bannerContainerTransitionStyle:'transform .3s',
        bannerContainerStyle:{},
        interval:'',
        lists:[],
        lastPage:false, // 是否最后一页
      };
    },
    methods:{
      run(){
        this.stop();
        // this.computedContainerTransform();
        this.interval = setInterval(()=>{
          if(this.curPage>=this.lists.length){
            this.curPage = 1;
          }else{
            this.curPage += 1;
            this.lastPage = this.curPage>=this.lists.length;
          }
          this.computedContainerTransform();
        },parseInt(this.configs.duration) || 600 );
      },

      // 上一个轮播
      prev(){

      },

      // 下一个轮播
      next(){

      },
      stop(){
        if(this.interval){
          clearInterval(this.interval);
        }
      },
      computedContainerTransform(){
        let index = (this.curPage-1) * this.singleWidth.replace('%','');
        if(this.lastPage){
          this.curPage = 1;
        }
        let transform = 'translateX('+ (index===0?0:('-'+index+'%') )+')'
        // console.log(this.allWidth);
        // this.translateStyle = transform;
        this.bannerContainerStyle = {
          transform:transform,
          width:this.allWidth
        };
        console.log(this.bannerContainerStyle);
      },
      ban(){
        this.$toast({
          message:'功能未完善',
          position:'bottom'
        })
      },
      touchstart(e){
        console.log(e);
        this.stop();
      },
      touchend(e){
        console.log(e);
        this.run();
      },
      setListRelationData(){
        let emptyList = this.list.length===0;
        this.lists = emptyList?[]:[].concat(this.list).concat([this.list[0]]);
        this.singleWidth = (100 / this.lists.length)+'%';
        this.page();
      },
      page(){
        this.curPage = this.lists.length>0?1:0;
        if(this.configs.isPage){

        }
      }
    },
    mounted(){
      this.setListRelationData();
      this.run();
    },
    updated(){
      this.run();
    },
    watch:{
      list(){
        this.setListRelationData();
      }
    },
    computed:{
      allWidth(){
        return 100 * (this.lists.length || 1)+'%';
      }
    }
  }
</script>

<style scoped lang="less">
  @keyframes loadingRotate {
    to{
      transform:rotate(360deg);
    }
    from{
      transform:rotate(0);
    }
  }
  .component-banner{
    position:relative;
    overflow:hidden;

    .loading{
      position:absolute;
      top:0;
      left:0;
      display:inline-block;
      width:100%;
      height:100%;
      text-align:center;
      background-color:#fff;

      span{
        position:relative;
        left:50%;
        top:50%;
        width:1em;
        height:1em;
        font-size:3em;
        display:block;
        color:#C0C4CC;
        margin:-.5em 0 0 -.5em;
        animation:loadingRotate 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
    }

    .component-banner-container{
      height:100%;
      transition:transform 1s;
      position:relative;
      z-index:10;

      .subItem{

        padding:0 .5em;
        box-sizing:border-box;
        height:100%;
        display:inline-block;
        overflow:hidden;

        img{
          border-radius:.3em;
          display:block;
          width:100%;
          height:100%;
        }
      }
    }

    .page{
      width:auto;
      display:inline-block;
      text-align:center;
      position:absolute;
      bottom:.3em;
      left:50%;
      transform:translateX(-50%);
      height:1em;
      line-height:1em;
      z-index:15;

      @pageSize:.5em;
      ul{
        width:100%;

        li{
          width:@pageSize;
          height:@pageSize;
          border-radius:@pageSize/2;
          background-color:#fff;
          display:inline-block;
          margin:0 @pageSize/3;
        }

        li.on{
          background-color:#DF4338;
        }
      }
    }
  }
</style>
